<template>
    <div class="flex mar-t-10 mar-x-10">
        <!-- 模板区域 -->
        <TempRegion
            ref="tempRegion"
        />

        <div
            class="flex flex-1 justify-center align-center mar-x-40"
            :style="{
                height: regionHeight + 'px',
            }"
        >
            <div class="text-center">
                <Control />

                <div class="mar-t-40">
                    <el-button type="primary" @click="handleCreateTemplate()">生成打印模板</el-button>
                </div>
            </div>
        </div>

        <!-- 模板配置区域 -->
        <TempConfig
            ref="tempConfig"
        />
    </div>
</template>

<script>
    import TempRegion from '@/components/PrintTemplate/tempRegion'
    import TempConfig from '@/components/PrintTemplate/tempConfig'
    import Control from '@/components/PrintTemplate/control'

    import { mapState } from 'vuex'
    import { addListener, removeListener } from '@/utils/lib'

    export default {
        name: 'PrintTemplate',

        components: {
            TempRegion,
            TempConfig,
            Control,
        },

        computed: {
            ...mapState({
                regionHeight: state => state.printTemplate.regionHeight,
                pageList: state => state.printTemplate.pageList,
            })
        },

        data() {
            return {
                
            }
        },

        mounted() {
            this.getPageHeight()
            addListener('resize', this.getPageHeight)
        },

        destroyed() {
            // 销毁键盘事件的监听
            removeListener('resize', this.getPageHeight)
        },

        methods: {
            // 获取页面可视区域高度
            getPageHeight() {
                let totalHeight = document.documentElement.clientHeight // 获取网页可视区域高度
                let regionHeight = totalHeight - 20
                this.$store.commit('printTemplate/setRegionHeight', regionHeight)
            },

            // 生成打印模板
            handleCreateTemplate() {
                console.log('模板数据：')
                console.log(this.pageList)
            },
        }
    }
</script>
